/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20240321
* @version:0.4.1
* @type:interface
* @description:
* # KeyBoard
* A customizable keyboard component for various input types including numbers, alphabets, and computer keyboard layouts.
* ## Properties
* - in property <Themes> theme: Themes.Dark; The theme of the keyboard, defaulting to dark mode.
* - in property <length> font-size: 16px; The font size used in the keyboard.
* - in-out property <KeyBoardType> keyboard-type: KeyBoardType.PhoneNumber; The type of keyboard layout (e.g., phone number, phone alphabet, computer).
* ## Callbacks
* - callback clicked(SKeyItem): Triggered when a key is clicked, returning the key item clicked.
* ============================================
*/


import { SCard } from "../card/index.slint";
import { SText } from "../text/index.slint";
import { Themes,PaddingType,PaddingProps,ShadowType,BorderType,SKeyItem,BorderProps,UseIcons,UseSurrealismFn, ColorLevel,KeyItems,KeyBoardType } from "../../use/index.slint";
import { DefaultKeyBoardKeys } from "../../themes/index.slint";
import { ScrollView, ListView } from "std-widgets.slint";


export component KeyBoardItem inherits Rectangle{
    in property <length> font-size : 16px;
    in property <Themes> theme;
    in property <SKeyItem> key;
    callback clicked(SKeyItem);
    background: area.has-hover ? UseSurrealismFn.get-color(root.theme, ColorLevel.Deepest) : UseSurrealismFn.get-color(root.theme, ColorLevel.Deeper);
    area:= TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked(key);
        }
        SText {
            font-size: root.font-size;
            theme: root.theme;
            text: key.label;
            wrap: no-wrap;
            font-weight: 700;
        }
    }
}

export component PhoneAlpha{
    height: 100%;
    width: 100%;
    in property <Themes> theme;
    in property <length> font-size: 16px;
    private property <[[SKeyItem]]> keys: DefaultKeyBoardKeys.alpha-keys;
    callback clicked(SKeyItem);
    VerticalLayout {
        alignment: space-between;
        for items in keys:HorizontalLayout {
            height: parent.height / keys.length;
            spacing: 2px;
            for item in items: KeyBoardItem{
                height: parent.height - 2px;
                width: (parent.width - ((items.length - 1) * 2px)) / items.length ;
                theme: root.theme;
                key:item;
                clicked(key) => {
                    root.clicked(key);
                }
            }
        }
    }
}

export component PhoneNumber inherits Rectangle {
    in property <Themes> theme: Themes.Dark;
    in property <length> font-size: 16px;
    private property <length> item-height: root.height / 4;
    private property <length> item-width: root.width / 5;
    in-out property <[SKeyItem]> signs: DefaultKeyBoardKeys.number-signs;
    private property <[[SKeyItem]]> keys: DefaultKeyBoardKeys.number-keys;
    private property <[SKeyItem]> tools: DefaultKeyBoardKeys.number-tools ;
    callback clicked(SKeyItem);
    height: 100%;
    width: 100%;
    layout := HorizontalLayout {
        alignment: space-between;
        left := Rectangle {
            width: root.width / 5 ;
            height: 100%;
            clip: true;
            ListView {
                for s-item in root.signs: Rectangle {
                    height: item-height;
                    width: parent.width - self.padding-right;
                    padding-right: 6px;
                    background: sign-area.has-hover ? UseSurrealismFn.get-color(root.theme, ColorLevel.Deepest) : UseSurrealismFn.get-color(root.theme, ColorLevel.Deeper);
                    sign-area := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.clicked(s-item);
                        }
                        sign-item := SText {
                            theme: root.theme;
                            text: s-item.label;
                            font-size: root.font-size;
                            font-weight: 700;
                            wrap: no-wrap;
                        }
                    }
                }
            }
        }

        center := Rectangle {
            width: 60%;
            height: 100%;
            clip: true;
            VerticalLayout {
                alignment: space-between;
                for key-line in root.keys: HorizontalLayout {
                    alignment: space-between;
                    padding-top: 2px;
                    padding-bottom: 2px;
                    spacing: 4px;
                    height: parent.height / 4;
                    for key in key-line: Rectangle {
                        height: item-height - parent.padding-top * 2;
                        width: item-width - parent.spacing;
                        background: key-area.has-hover ? UseSurrealismFn.get-color(root.theme, ColorLevel.Deepest) : UseSurrealismFn.get-color(root.theme, ColorLevel.Deeper);
                        key-area := TouchArea {
                            mouse-cursor: pointer;
                            clicked => {
                                root.clicked(key);
                            }
                            key-item := SText {
                                theme: root.theme;
                                text: key.label;
                                font-size: root.font-size;
                                font-weight: 700;
                                wrap: no-wrap;
                            }
                        }
                    }
                }
            }
        }

        right := Rectangle {
            width: 20%;
            height: 100%;
            VerticalLayout {
                padding-top: 2px;
                padding-bottom: 2px;
                padding-left: 4px;
                spacing: 4px;
                for t-item in root.tools: Rectangle {
                    height: item-height - parent.spacing;
                    padding-right: 6px;
                    background: tool-area.has-hover ? UseSurrealismFn.get-color(root.theme, ColorLevel.Deepest) : UseSurrealismFn.get-color(root.theme, ColorLevel.Deeper);
                    tool-area := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.clicked(t-item);
                        }
                        tool-item := SText {
                            theme: root.theme;
                            text: t-item.label;
                            font-size: root.font-size;
                            font-weight: 700;
                            wrap: no-wrap;
                        }
                    }
                }
            }
        }
    }
}

export component Computer {
    height: 100%;
    width: 100%;
    in property <Themes> theme: Themes.Dark;
    in property <length> font-size: 16px;
    in-out property <[SKeyItem]> signs: DefaultKeyBoardKeys.alpha-signs;
    private property <[[SKeyItem]]> keys: DefaultKeyBoardKeys.alpha-keys;
    callback clicked(SKeyItem);
    VerticalLayout {
        alignment: space-between;
        Rectangle {
            height: parent.height / (keys.length + 1) - 2px;
            scroll:= ScrollView {
                height: parent.height;
                width: parent.width;
                viewport-height: parent.height;
                viewport-width: signs.length * (root.width / 10);
                HorizontalLayout {
                    padding-bottom: 2px;
                    for item in signs: KeyBoardItem{
                        height: scroll.height - 2px - parent.padding-bottom;
                        width: root.width / 10;
                        theme: root.theme;
                        key:item;
                        clicked(key) => {
                            root.clicked(key);
                        }
                    }
                }
            }
        }
        for items in keys:HorizontalLayout {
            height: parent.height / (keys.length + 1);
            spacing: 2px;
            for item in items: KeyBoardItem{
                height: parent.height - 2px;
                width: (parent.width - ((items.length - 1) * 2px)) / items.length ;
                theme: root.theme;
                key:item;
                clicked(key) => {
                    root.clicked(key);
                }
            }
        }
    }
}

export component KeyBoard {
    height: 100%;
    width: 100%;
    in property <Themes> theme: Themes.Dark;
    in property <length> font-size: 16px;
    in-out property <KeyBoardType> keyboard-type: KeyBoardType.PhoneNumber;
    callback clicked(SKeyItem);
    if keyboard-type == KeyBoardType.PhoneAlpha: PhoneAlpha {
        height: 100%;
        width: 100%;
        theme: root.theme;
        clicked(key) => {
            root.clicked(key);
        }
    }
    if keyboard-type == KeyBoardType.PhoneNumber:PhoneNumber {
        theme: root.theme;
        clicked(key) => {
            root.clicked(key);
        }
    }
    if keyboard-type == KeyBoardType.Computer:Computer {
        theme: root.theme;
        clicked(key) => {
            root.clicked(key);
        }
    }
}

